<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" 
	content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>餐饮网站-俞健澄</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <style type="text/css">
    	/*公共部分*/
    	body,button,input,select,h3,h6{
    		font-family: "microsoft yahei";
    	}
    	/*导航模块*/
    	.head-top{
    		background: #5fa022;/*rgb*/
    		padding: 0.8em 0;
    	}
    	.navbar-brand{
    		padding: 0 0;
    	}
    	.navbar-brand>img{
    		height: auto;
    		margin-right: 5px;
    		margin-top: 5px;
    		width: 250px;
    	}
    	.navbar-default{
    		padding: 1.5em 0;
    		background-color: #2f0f1;
    		box-shadow: 12px -5px 39px -12px;
    	}
    	.navbar-default .navbar-nav>li a{
    		top: 10px;
    		padding: 0.5em 3em;
    		text-decoration:none;
    		font-weight:600 ;
    		font-size: 1.2em;
    		color: #919191;
    	}
    	.navbar-default .navbar-nav> li >a:hover,.navbar-default .navbar-nav> li >a:focus {
          background:#D96B66;
          color: white;
          border-radius: 3px;
          }

        .navbar-right>a{
         color:#D96B66;
        }
       @media (max-width: 970px) {
    .navbar-default .navbar-nav>li a {
        font-size: 1.1em;
    }
}
    	/*搜素模块*/
    	  .search{
    background-image: url(images/banner.jpg);
    background-size: cover;
    -webkit-background-size: cover;
    min-height: 600px;
    margin-top: -20px;
}
.reservation {
    padding: 60px 60px;
    width:50%;
    background: rgba(255, 255, 255, 0.7);
    margin: 0 auto;
    margin-top:15%;
    font-weight: 500;
    color: #f2f0f1;
    font-size: 1.2em;
    outline: none;
}
.btn{
    width: 50% ;
    background: #D96B66;
    color: #fff;
    padding: 5px;
    border: none;
    border-radius: 4px;
    -webkit-border-radius: 4px;
}
        .form-control{
           color: #8e908d;
         }
         .searchbtn{
           text-align: center;
          }
         @media (max-width: 768px){
          .reservation {
        padding: 20px 20px;
        width: 90%;
        }
       }
       /*热卖商品模块*/
        .hot h3 {
    margin-top: -20px;
    color: #1A1A1A;
    font-size: 1.5em;
    font-weight: 600;
    margin: 0 0 1em;
    padding: 0 0 0.5em;
    border-bottom: 2px solid #eee;
}
.hot p {
    color: #5fa022;;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.8em;
    margin: 1em 0;
}
.hot {
    padding: 3em 0;
    border: 1px solid #eee;
    margin: 0 0;
}
.hot h6 {
    color: #C15162;
    font-size: 1.5em;
    font-weight: 400;
    margin: 0.3em 0;
}
a.morebtn {
    display: block;
    font-size: 1em;
    color: #FFF;
    text-decoration: none;
    font-weight: 400;
    background: #D96B66;
    padding: 10px 18px;
    transition: 0.5s all ease;
    -webkit-transition: 0.5s all ease;
    border-radius: 3px;
    -webkit-border-radius: 3px;
}
a.morebtn:hover{
    background:  #5fa022;
}
@media (max-width: 1024px) {
    a.morebtn{
        max-width:410px;
    }
}
  /*特色推荐模块*/
  .navbar-brand>img{
    height: auto;
    width:250px;
    margin-right: 5px;
    margin-top: 5px;
}

   .nav-pills>li>a{
    color:#8e908d ;
}

.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
    color: #fff;
    background-color: #5A9522;
}
.choose{
    border: 1px solid silver;
}

.tab-content{
    margin: 5px;
    text-align: center;
}
/*轮播广告模块*/
 .pic{
    margin: 0 auto;
    width: 800px;
    padding: 20px;
}
.carousel {
    background: white;
}
@media (max-width:992px) {
    .pic{
        width: 415px;
    }
}
/*页脚模块*/
.footer p {
    color: #fff;
    font-size: 1em;
    line-height: 1.8em;
    vertical-align: middle;
    margin: 0.4em 0;
}
.footer p a{
    color: #fff;
    text-decoration:none;
}
.footer {
    padding: 1em 0;
    background-color:#D96B66;
}
.footer-right ul {
    padding: 0;
}
.footer-right li {
    display: inline-block;
    margin: 0 1em;
}
.footer-left {
    float: left;
}
.footer-right {
    float: right;
}
.glyphicon{
    font-size: 1.2em;
    color: #f2f0f1 ;
}
    </style>
	</head>
	<body>
<!--导航栏-->
<header>
			<!--装饰条-->
			<div class="head-top"></div>
			<!--导航栏-->
			<nav class="navbar navbar-default">
				<div class="container-fluid">
					<div class="container">
						<!--导航栏头部、logo、汉堡按钮-->
					  <div class="navbar-header">
					  	<!--logo-->
					  	<a href="#" class="navbar-brand"><img src="images/logo.png" alt=""></a>
					  	<!--汉堡按钮-->
					    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
					  		<span class="sr-only"></span>
					  		<span class="icon-bar"></span>
					  		<span class="icon-bar"></span>
					  		<span class="icon-bar"></span>
					  	</button>
					  </div>
					  <!--  导航栏菜单、购物车-->
					  <div class="collapse navbar-collapse" id="navbar-collapse" aria-expanded="false">
					  	<!--导航栏菜单-->
					  	<!--ul>(li>a)*5-->
					  	<ul class="nav navbar-nav">
                         <li><a href="#">主页</a></li>
                         <li><a href="#">餐厅</a></li>
                         <li><a href="#">健康</a></li>
                         <li><a href="#">话题</a></li>
                         <li><a href="#">联系我们</a></li>
                        </ul>
                        <div class="navbar-right ">
                    <a href="#">
                        <h3> <span >￥0.00 <img src="images/bag.png" alt=""/></span></h3>
                    </a>
                        </div>
					  </div>
				    </div>
				</div>
			</nav>
		</header>
<!--导航栏结束-->
<!--搜索区域-->
 <div class="search" >
    <div class="container">
        <div class="reservation">
            <form class="form-horizontal" role="form">
                <div class="form-group">
                    <div class="col-sm-12 col-md-12 col-lg-12">
                        <input type="text" class="form-control input-lg" id="name" placeholder="请输入餐厅名称">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-12 col-md-12 col-lg-12">
                        <select id="country"  class="form-control input-lg">
                            <option value="null">请选择城市</option>
                            <option value="bj">北京</option>
                            <option value="sh">上海</option>
                            <option value="sz">深圳</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <div class="searchbtn">
                        <button type="submit" class="btn btn-success btn-lg">
                            <img src="images/search-icon.png">&nbsp;搜索</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- 搜索区域结束 -->
<!-- 热卖商品 -->
<div class="hot">
    <div class="container">
        <div class="col-md-4 ">
            <h3>米西奈斯煎饼</h3>
            <img src="images/4.jpg" class="img-responsive" alt="">
            <div>
                <p class="glyphicon glyphicon-thumbs-up">两种口味可供选择 </p>
                <div class="cur">
                        <span ><a class="morebtn" href="#">添加到购物车</a></span>
                        <span><h6>一口价 ：￥45.00</h6></span>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <h3>蒙特斯大虾</h3>
            <img src="images/1.jpg" class="img-responsive" alt="蒙特斯大虾">
            <div>
                <p class="glyphicon glyphicon-thumbs-up">两种口味可供选择 </p>
                <div class="cur">
                            <span><a class="morebtn" href="#">添加到购物车</a></span>
                            <span><h6>一口价 ：￥55.00</h6></span>
                    </div>
                </div>
        </div>
        <div class="col-md-4">
            <h3>香酥鸡排</h3>
            <img src="images/3.jpg" class="img-responsive" alt="香酥鸡排">
            <div>
                <p class="glyphicon glyphicon-thumbs-up">两种口味可供选择 </p>
                <div class="cur">
                       <span><a class="morebtn " href="#">添加到购物车</a></span>
                        <span><h6>一口价 ：￥65.00</h6></span>
                </div>
            </div>
        </div>
    </div>
</div>
<!--热卖商品结束 -->
<!--特色推荐-->
<div class="container">
    <div class="choose">
        <div class="row">
            <div class="col-md-12">
                <div class="navbar-header hidden-xs">
                    <a class="navbar-brand" href="#"><img src="images/title.jpg" /></a>
                </div>
                <!-- Nav tabs -->
                <ul class="nav nav-pills navbar-right " role="tablist" style="margin-right: 0px;">
                    <li role="presentation" class="active"><a href="#dishes"  role="tab" data-toggle="tab">菜品</a></li>
                    <li role="presentation"><a href="#drink"  role="tab" data-toggle="tab">饮品</a></li>
                    <li role="presentation"><a href="#staple"  role="tab" data-toggle="tab">主食</a></li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="tab-content">
                    <!--菜品-->
                    <div role="tabpanel" class="tab-pane active" id="dishes">
                        <div class=" col-md-2 col-sm-4 col-xs-6">
                            <img src="images/products/small01.jpg"/>
                            <p>菜品</p>
                            <p>￥145.0</p>
                        </div>
                        <div class="product-item col-md-2 col-sm-4 col-xs-6">
                            <img src="images/products/small02.jpg"/>
                            <p>菜品</p>
                            <p>￥165.0</p>
                        </div>
                        <div class="product-item col-md-2 col-sm-4 col-xs-6">
                            <img src="images/products/small04.jpg"/>
                            <p>菜品</p>
                            <p>￥165.0</p>
                        </div>
                        <div class="product-item col-md-2 col-sm-4 col-xs-6">
                            <img src="images/products/small02.jpg"/>
                            <p>菜品</p>
                            <p>￥165.0</p>
                        </div>
                        <div class="product-item col-md-2 col-sm-4 col-xs-6">
                            <img src="images/products/small07.jpg"/>
                            <p>菜品</p>
                            <p>￥145.0</p>
                        </div>
                        <div class="product-item col-md-2 col-sm-4 col-xs-6">
                            <img src="images/products/small08.jpg"/>
                            <p>菜品</p>
                            <p>￥165.0</p>
                        </div>
                    </div>

                    <!--饮品-->
                    <div role="tabpanel" class="tab-pane" id="drink">
                        <div class="product-item col-md-2 col-sm-4 col-xs-6">
                            <img src="images/products/small03.jpg"/>
                            <p>饮品</p>
                            <p>￥98.0</p>
                        </div>
                        <div class="product-item col-md-2 col-sm-4 col-xs-6">
                            <img src="images/products/small03.jpg"/>
                            <p>饮品</p>
                            <p>￥98.0</p>
                        </div>
                    </div>
                    <!--</div>-->
                    <!--主食-->
                    <div role="tabpanel" class="tab-pane" id="staple">
                        <div class="product-item col-md-2 col-sm-4 col-xs-6">
                            <img src="images/products/small05.jpg"/>
                            <p>主食</p>
                            <p>￥56.0</p>
                        </div>
                        <div class="product-item col-md-2 col-sm-4 col-xs-6">
                            <img src="images/products/small06.jpg"/>
                            <p>主食</p>
                            <p>￥56.0</p>
                        </div>
                        <div class="product-item col-md-2 col-sm-4 col-xs-6">
                            <img src="images/products/small09.jpg"/>
                            <p>主食</p>
                            <p>￥56.0</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--特色推荐结束-->
<!--轮播广告-->
<div class="container hidden-xs" >
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner ">
            <div class="item active">
                <div class="pic">
                    <img src="images/1p.jpg"  alt="">
                    <img src="images/2p.jpg"  alt="">
                    <img src="images/3p.png"  alt="">
                    <img src="images/4p.jpg"  alt="">
                    <img src="images/5p.jpg"  alt="">
                    <img src="images/6p.jpg"  alt="">
                </div>
            </div>
            <div class="item ">
                <div class="pic">
                    <img src="images/2p.jpg"  alt="">
                    <img src="images/3p.png"  alt="">
                    <img src="images/4p.jpg"  alt="">
                    <img src="images/5p.jpg"  alt="">
                    <img src="images/6p.jpg"  alt="">
                    <img src="images/7p.jpg"  alt="">
                </div>
            </div>
            <div class="item">
                <div class="pic">
                    <img src="images/3p.png"  alt="">
                    <img src="images/4p.jpg"  alt="">
                    <img src="images/5p.jpg"  alt="">
                    <img src="images/6p.jpg"  alt="">
                    <img src="images/7p.jpg"  alt="">
                    <img src="images/8p.jpg"  alt="">
                </div>
            </div>
            <div class="item">
                <div class="pic">
                    <img src="images/4p.jpg"  alt="">
                    <img src="images/5p.jpg"  alt="">
                    <img src="images/6p.jpg"  alt="">
                    <img src="images/7p.jpg"  alt="">
                    <img src="images/8p.jpg"  alt="">
                    <img src="images/1p.jpg"  alt="">
                </div>
            </div>
            <div class="item ">
                <div class="pic">
                    <img src="images/5p.jpg"  alt="">
                    <img src="images/6p.jpg"  alt="">
                    <img src="images/7p.jpg"  alt="">
                    <img src="images/8p.jpg"  alt="">
                    <img src="images/1p.jpg"  alt="">
                    <img src="images/2p.jpg"  alt="">
                </div>
            </div>
            <div class="item ">
                <div class="pic">
                    <img src="images/6p.jpg"  alt="">
                    <img src="images/7p.jpg"  alt="">
                    <img src="images/8p.jpg"  alt="">
                    <img src="images/1p.jpg"  alt="">
                    <img src="images/2p.jpg"  alt="">
                    <img src="images/3p.png"  alt="">
                </div>
            </div>
            <div class="item">
                <div class="pic">
                    <img src="images/7p.jpg"  alt="">
                    <img src="images/8p.jpg"  alt="">
                    <img src="images/1p.jpg"  alt="">
                    <img src="images/2p.jpg"  alt="">
                    <img src="images/3p.png"  alt="">
                    <img src="images/4p.jpg"  alt="">
                </div>
            </div>
            <div class="item ">
                <div class="pic">
                    <img src="images/8p.jpg"  alt="">
                    <img src="images/1p.jpg"  alt="">
                    <img src="images/2p.jpg"  alt="">
                    <img src="images/3p.png"  alt="">
                    <img src="images/4p.jpg"  alt="">
                    <img src="images/5p.jpg"  alt="">
                </div>
            </div>
        </div>
        <!-- 轮播（Carousel）导航 -->
        <a class="carousel-control left  " href="#myCarousel" role="button " data-slide="prev">
        	<!--&lsaquo;--><span class="glyphicon glyphicon-chevron-left"></span></a>
        <a class="carousel-control right " href="#myCarousel" role="button" data-slide="next">
        	<!--&rsaquo;--><span class="glyphicon glyphicon-chevron-right"></a>
        
         <!--轮播计数器-->
         <ol class="carousel-indicators">
		 	<li class="active" data-target="#myCarousel" data-slide-to="0"></li>
		 	<li data-target="#myCarousel" data-slide-to="1"></li>
		 	<li data-target="#myCarousel" data-slide-to="3"></li>
		 	<li data-target="#myCarousel" data-slide-to="4"></li>
		 	<li data-target="#myCarousel" data-slide-to="5"></li>
		 	<li data-target="#myCarousel" data-slide-to="6"></li>
		 	<li data-target="#myCarousel" data-slide-to="7"></li>
		 </ol>
    </div>
</div>
<!--轮播广告结束-->
<!-- 页脚-->
<footer class="footer">
    <div class="container">
        <div class="footer-left">
            <p>Copyrights &#169;&copy; 2021 Bootstrap 响应式餐饮网站  | 版权所有 <a href="#">www.bitc.edu.cn</a></p>
        </div>
        <div class="footer-right">
            <ul>
                <li><a href="#"><i class="glyphicon glyphicon-phone-alt">&nbsp;联系我们</i></a></li>
                <li><a href="#"><i class="glyphicon glyphicon-map-marker">&nbsp;公司地址</i></a></li>
                <li><a href="#"><i class="glyphicon glyphicon-question-sign">&nbsp;服务声明</i></a></li>

            </ul>
        </div>
    </div>
</footer>
<!-- 页脚-->
		<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="UTF-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="UTF-8"></script>
	</body>
</html>
